#HTML 的 <slot> 标签

HTML 的 <slot> 元素是 Web Components 技术套件的一部分。它是组件内部的占位符，你可以使用自己的标签来填充该占位符，从而创建单独的 DOM 树并将其一起呈现。

#属性

• name: 插槽名称。

#示例

<!-- 自定义组件 -->
<template id="user-card">
    <style>
        .card {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 16px;
        margin: 10px;
        max-width: 300px;
        }
        .name {
        font-weight: bold;
        font-size: 1.2em;
        }
    </style>

    <div class="card">
        <div class="name">
            <!-- 命名为 username 的插槽 -->
            <slot name="username">默认用户名</slot>
        </div>
        <div class="email">
            <!-- 命名为 email 的插槽 -->
            <slot name="email">默认邮箱</slot>
        </div>
        <div>
            <!-- 未命名的默认插槽 -->
            <slot>其他信息可以放在这里</slot>
        </div>
    </div>
</template>

<!-- 使用自定义组件 -->
<user-card>
    <!-- 插入 username 插槽 -->
    <span slot="username">Plan C</span>

    <!-- 插入 email 插槽 -->
    <span slot="email">[email protected]</span>

    <!-- 插入默认插槽 -->
    <p>这是一位优秀的工程师，拥有 N 年工作经验。</p>
</user-card>

<slot>

    
    Plan C

    
    [email protected]

    
    
这是一位优秀的工程师，拥有 N 年工作经验。